<template>
  <div>
    <a-modal :visible="true" :footer="null" :width="700" @cancel="cancelEvent" class="orderModal">
      <div class="infoModal" v-if="clickType == 1">添加用户</div>
      <div class="infoModal" v-if="clickType == 2">编辑用户</div>
      <a-form-model
        ref="ruleForm"
        :model="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :rules="rules"
        class="formVideoModel"
      >
        <a-form-model-item ref="name" label="姓名" prop="name">
          <a-input
            v-model="form.name"
            @blur="
              () => {
                $refs.name.onFieldBlur()
              }
            "
          />
        </a-form-model-item>
        <a-form-model-item ref="mobile" label="联系电话" prop="mobile" v-if="clickType == 1">
          <a-input
            v-model="form.mobile"
            @blur="
              () => {
                $refs.mobile.onFieldBlur()
              }
            "
          />
        </a-form-model-item>
        <a-form-model-item label="角色" prop="roleName" ref="roleName">
          <a-select v-model="form.roleName" placeholder="请选择你的角色">
            <a-select-option value="管理员">
              管理员
            </a-select-option>
            <a-select-option value="客户经理">
              客户经理
            </a-select-option>
            <a-select-option value="项目经理">
              项目经理
            </a-select-option>
            <a-select-option value="一点支撑人员">
              一点支撑人员
            </a-select-option>
             <a-select-option value="区县建设">
              区县建设
            </a-select-option>
            <a-select-option value="代维单位">
              代维单位
            </a-select-option>
            <a-select-option value="区县公司">
              区县公司
            </a-select-option>
            <a-select-option value="市公司">
              市公司
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="deptName" label="岗位名称" prop="deptName">
          <a-input
            v-model="form.deptName"
            @blur="
              () => {
                $refs.deptName.onFieldBlur()
              }
            "
          />
        </a-form-model-item>
        <a-form-model-item ref="belong" label="归属" prop="belong">
          <a-select v-model="form.belong" placeholder="请选择归属">
            <a-select-option value="鼓楼">
              鼓楼
            </a-select-option>
            <a-select-option value="福清">
              福清
            </a-select-option>
            <a-select-option value="长乐">
              长乐
            </a-select-option>
            <a-select-option value="闽侯">
              闽侯
            </a-select-option>
            <a-select-option value="罗源">
              罗源
            </a-select-option>
            <a-select-option value="闽清">
              闽清
            </a-select-option>
            <a-select-option value="连江">
              连江
            </a-select-option>
            <a-select-option value="平潭">
              平潭
            </a-select-option>
            <a-select-option value="永泰">
              永泰
            </a-select-option>
            <a-select-option value="马尾">
              马尾
            </a-select-option>
            <a-select-option value="晋安">
              晋安
            </a-select-option>
            <a-select-option value="仓山">
              仓山
            </a-select-option>
            <a-select-option value="台江">
              台江
            </a-select-option>
            <a-select-option value="市级">
              市级
            </a-select-option>
            <a-select-option value="市级-管理">
              市级-管理
            </a-select-option>
            <a-select-option value="省级-管理">
              省级-管理
            </a-select-option>
            <a-select-option value="省级">
              省级
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="type" label="人员类型" prop="type">
          <a-input
            v-model="form.type"
            @blur="
              () => {
                $refs.type.onFieldBlur()
              }
            "
          />
        </a-form-model-item>

        <a-form-model-item :wrapper-col="{ span: 10, offset: 10 }">
          <a-button type="primary" @click="onSubmit">
            提交
          </a-button>
          <a-button style="margin-left: 10px;" @click="onCancel">
            取消
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { addMember, modifyMemberInfo } from '@/api/public'
export default {
  props: ['newform', 'clickType'],
  data() {
    return {
      lodaing: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      dataSource: [],
      form: {},
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        belong: [{ required: true, message: '请选择', trigger: 'change' }],
        deptName: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
        mobile: [
          { required: true, message: '请输入电话', whitespace: true },
          { validator: this.phoneCheck.bind(this) }
        ],
        type: [{ required: true, message: '请输入人员类型', trigger: 'blur' }],
        account: [
          { type: 'email', message: '邮箱的格式不正确' },
          { required: true, message: '请输入你的邮箱!' }
        ],
        roleName: [{ required: true, message: '请选择你的角色', trigger: 'change' }]
      }
    }
  },
  created() {},
  mounted() {
    if (this.clickType == 1) {
      Object.keys(this.form).forEach(key => (this.form[key] = ''))
    } else {
      this.form = this.newform
    }
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.clickType == 1) {
            this.form.password = '123456'
            this.form.account = this.form.mobile
            addMember(this.form).then(response => {
              if (response != undefined) {
                if (response.code == 200) {
                  let type = 'success'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '用户添加成功!',
                    duration: 3
                  })
                  this.$emit('successEvent')
                }
              }
            })
          } else {
            this.form.account = this.form.mobile
            modifyMemberInfo(this.form).then(response => {
              if (response != undefined) {
                if (response.code == 200) {
                  let type = 'success'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '用户修改成功!',
                    duration: 3
                  })
                  this.$emit('successEvent')
                }
              }
            })
          }
        } else {
          return false
        }
      })
    },
    phoneCheck(rule, value, callbackFn) {
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!reg.test(value)) {
        callbackFn('手机号码格式不正确')
        return
      }
      callbackFn()
    },
    handleChange(e) {
      this.form.roleName = e
    },
    onCancel() {
      this.$emit('cancelEvent')
    },
    handleTableChange() {},
    addMember() {},
    cancelEvent() {
      this.$emit('cancelEvent')
    }
  }
}
</script>

<style lang="less">
.infoModal {
  height: 51px;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px 6px 0px 0px;
  text-align: center;
  line-height: 51px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}
</style>
